<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门管理</title>
    <!--Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="js/popper.min.js"></script>
    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="js/bootstrap.min.js"></script>
    <!-- 部门管理css样式 -->
    <link rel="stylesheet" href="css/depart.css">
    <!-- 部门管理vue -->
    <script src="../js/vue.js"></script>
    <!-- 部门管理jquery -->
    <script src="../js/jquery3.6.js"></script>
</head>
<body>
    <div class="box" id="box">
        <div class="container-fluid mt-3">
            <div class="row height1">
                <div class="col p-3 bg-dark text-white"><h5>部门管理</h5></div>
            </div>
            <div class="row">
                <div class="col mt-3 text-white">
                    <div class="container mt-0 position-relative">
                        <div class="div-add">
                            <button type="button" class="btn btn-outline-dark btn-sm bilal-btn" data-bs-toggle="modal" data-bs-target="#myModal2">添加</button>
                        </div>
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>部门名称</th>
                                <th>负责人</th>
                                <th>联系电话</th>
                                <th>移动电话</th>
                                <th>传真</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="d in Department.list" class="lh-48">
                                <td>{{d.departName}}</td>
                                <td>{{d.principalUser}}</td>
                                <td>{{d.connectTelNo}}</td>
                                <td>{{d.connectMobileTelNo}}</td>
                                <td>{{d.faxes}}</td>
                                <td>
                                    <button @click="shouUpd(d)" type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="modal" data-bs-target="#myModal">修改</button>
                                    <button @click="delDep(d)" type="button" class="btn btn-outline-danger btn-sm ms-lg-3">删除</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="container">
<!--                    <h2>当前页页码状态</h2>-->
<!--                    <p>当前页可以使用 .active 类来高亮显示：</p>-->
                    <ul class="pagination m-auto width1 pagination-sm">
                        <li class="page-item" v-if="Department.page > 1"><a class="page-link" href="#" @click="toPage(Department.page-1)">上一页</a></li>
                        <li class="page-item disabled" v-else><a class="page-link" href="#">第一页</a></li>
                        <li class="page-item" v-if="Department.page > 1"><a class="page-link" href="#">...</a></li>
                        <li class="page-item disabled"  v-if="Department.page == 1"><a class="page-link page0" href="#">{{Department.page-1}}</a></li>
                        <li class="page-item" v-else @click="toPage(Department.page-1)"><a class="page-link page0" href="#">{{Department.page-1}}</a></li>
                        <li class="page-item active"><a class="page-link page0" href="#">{{Department.page}}</a></li>
                        <li class="page-item disabled" v-if="Department.page == Department.total"><a class="page-link page0" href="#">{{Department.page+1}}</a></li>
                        <li class="page-item" v-else @click="toPage(Department.page+1)"><a class="page-link page0" href="#">{{Department.page+1}}</a></li>
                        <li class="page-item" v-if="Department.page < Department.total"><a class="page-link" href="#">...</a></li>
                        <li class="page-item" v-if="Department.page < Department.total"><a class="page-link" href="#" @click="toPage(Department.page+1)">下一页</a></li>
                        <li class="page-item disabled" v-else><a class="page-link" href="#">最后一页</a></li>
                    </ul>
                </div>

            </div>
        </div>
        <!-- 修改 -->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- 修改头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">修改</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <!-- 修改内容 -->
                    <div class="modal-body">
                        <form class="d-grid">
                            <div class="form-floating mb-2 mt-2">
                                <input type="text" class="form-control" id="email2" placeholder="Enter departName" name="departName" v-model="DepartmentUpd.departName">
                                <label for="email2">部门名称</label>
                            </div>
                            <div class="form-floating mb-2 mt-2">
                                <select class="form-select" id="sel22" name="sellist" v-model="DepartmentUpd.principalUser">
                                    <option>系统管理员</option>
                                    <option>张三</option>
                                    <option>管理员</option>
                                    <option>4</option>
                                </select>
                                <label for="sel2" class="form-label">部门负责人:</label>
                            </div>
                            <div class="form-floating mt-2 mb-2">
                                <input type="text" class="form-control" id="CTel2" placeholder="Enter CTel" name="CTel" v-model="DepartmentUpd.connectTelNo">
                                <label for="CTel2">联系电话</label>
                            </div>
                            <div class="form-floating mt-2 mb-2">
                                <input type="text" class="form-control" id="CMTel2" placeholder="Enter CMTel" name="CMTel" v-model="DepartmentUpd.connectMobileTelNo">
                                <label for="CMTel2">移动电话</label>
                            </div>
                            <div class="form-floating mt-2 mb-2">
                                <input type="text" class="form-control" id="faxes2" placeholder="Enter faxes" name="faxes" v-model="DepartmentUpd.faxes">
                                <label for="faxes2">传真</label>
                            </div>
                            <button type="button" class="btn btn-primary btn-block" @click="updDepartment">提交</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>

        <!-- 添加 -->
        <div class="modal fade" id="myModal2">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- 添加头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">添加</h4>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>

                    <!-- 添加内容 -->
                    <div class="modal-body ">
                        <form action="../../departmentServlet?flag=addDep" class="d-grid was-validated" method="post">
                            <div class="form-floating mb-2 mt-2">
                                <input type="text" class="form-control" id="email" placeholder="Enter departName" name="departName" required>
                                <label for="email">部门名称</label>
                                <div class="invalid-feedback">请输部门名称！</div>
                            </div>
                            <div class="form-floating mb-2 mt-2">
                                <select class="form-select" id="sel2" name="sellist" required>
                                    <option>系统管理员</option>
                                    <option>张三</option>
                                    <option>管理员</option>
                                    <option>4</option>
                                </select>
                                <label for="sel2" class="form-label">部门负责人:</label>
                            </div>
                            <div class="form-floating mt-2 mb-2">
                                <input type="text" class="form-control" id="CTel" placeholder="Enter CTel" name="CTel" required>
                                <label for="CTel">联系电话</label>
                                <div class="invalid-feedback">请输入联系电话！</div>
                            </div>
                            <div class="form-floating mt-2 mb-2">
                                <input type="text" class="form-control" id="CMTel" placeholder="Enter CMTel" name="CMTel" required>
                                <label for="CMTel">移动电话</label>
                                <div class="invalid-feedback">请输入移动电话！</div>
                            </div>
                            <div class="form-floating mt-2 mb-2">
                                <input type="text" class="form-control" id="faxes" placeholder="Enter faxes" name="faxes" required>
                                <label for="faxes">传真</label>
                                <div class="invalid-feedback">请输入传真！</div>
                            </div>
                            <button type="submit" class="btn btn-primary btn-block">提交</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="alert-div">
            <div class="container mt-3">
                <div class="alert alert-success alert-dismissible bilal1 fade ">
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                    <strong>成功!</strong> 修改成功。
                </div>
            </div>
            <div class="alert alert-warning alert-dismissible bilal2 fade ">
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                <strong>警告!</strong> 删除成功。
            </div>
        </div>

    </div>
</body>
<script>
    const vue = {
        data(){
            return{
                Department:selDepartment(1,5),
                DepartmentUpd:{}
            }
        },
        methods:{
            //点击修改，要修改的一行的数据给DepartmentUpd
            shouUpd : function (s) {
                this.DepartmentUpd = s;
            },
            //点提交，
            updDepartment: function (){
                //把修改的数据传递到后台
                $.ajax({
                    type: "post",
                    url: "../../departmentServlet?flag=updDep",
                    data:this.DepartmentUpd, //把要修改的部门对象传递给data中
                    async:false,
                    success:function (data){
                        if (data == 1){
                            $(".bilal1").addClass("show");
                            window.setTimeout(function(){
                                $(".bilal1").removeClass("show");
                            },3000);//显示的时间
                        }
                    }
                })

            },
            delDep:function (s){
                this.DepartmentUpd = s;
                $.ajax({
                    type: "post",
                    url: "../../departmentServlet?flag=delDep",
                    data:this.DepartmentUpd, //把要删除的部门对象的id传递给data中
                    async:false,
                    success:function (data){
                        console.log(data)
                        if (data == 1){
                            app.Department = selDepartment(1,5)
                            $(".bilal2").addClass("show");
                            window.setTimeout(function(){
                                $(".bilal2").removeClass("show");
                            },3000);//显示的时间
                        }
                    }
                })
            },
            toPage:function(page){
                this.Department = selDepartment(page,5);
            }

        }
    }
    let app = Vue.createApp(vue).mount("#box")
    /**
     * 查询部门信息
     */
    function selDepartment(page,limit){
        let list;
        $.ajax({
            type:"post",
            url: "../../departmentServlet?flag=selDep",
            data:{  //请求携带的查询条件 key：value
                "page":page,"limit":limit
            },
            dataType:"json",
            async:false,
            success:function (json){
                console.log(json)
                list = json
            }
        })
        return list;
    }

</script>
</html>
<script>
    // import Index from "../../js";
    // export default {
    //     components: {Index}
    // }
</script>